

function Tab(el){

    this.el = document.querySelector(el) //this.el 最大的盒模型box1

    this.init() //启动插件
}
Tab.prototype.init = function (){

    //标题鼠标移入（同步标题和内容）
    this.titleOver()
}

//标题鼠标移入
Tab.prototype.titleOver = function (){

  let ulliObj = this.el.querySelectorAll("ul li")

  ulliObj.forEach((item,i)=>{

      item.onmouseover = ()=>{    

        this.tbTitle(ulliObj,i)
        this.tbContent(i)
        
      }
  })
}

// 同步标题
Tab.prototype.tbTitle = function(ulliObj,i){

      this.el.querySelector("ul li.active").className = ""

        ulliObj[i].className ="active"
}

//同步内容
Tab.prototype.tbContent= function(i){

    this.el.querySelector("ol li.active").className = ""  

    let olliObj = this.el.querySelectorAll("ol li")

    olliObj[i].className ="active"
}